<script context="module" lang="ts">
    // Components are expensive in svelte, this reduces bundle size vs. creating a component for each icon
    const icons = {
        Add: ["0 0 24 24", "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"],
        ArrowBack: ["0 0 48 48", "m32.75 44-20-20 20-20 2.8 2.85L18.4 24l17.15 17.15Z"],
        ArrowForward: ["0 0 48 48", "m15.2 43.9-2.8-2.85L29.55 23.9 12.4 6.75l2.8-2.85 20 20Z"],
        Close: ["0 0 24 24", "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"],
        ExpandLess: ["0 0 24 24", "m7.4 15.375-1.4-1.4 6-6 6 6-1.4 1.4-4.6-4.6Z"],
        ExpandMore: ["0 0 24 24", "m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z"],
        Lock: ["0 0 24 24", "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"],
        Refresh: ["0 0 24 24", "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"],
        Tune: ["0 0 24 24", "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"],
        Undo: ["0 0 24 24", "M7 19v-2h7.1q1.575 0 2.737-1Q18 15 18 13.5T16.837 11q-1.162-1-2.737-1H7.8l2.6 2.6L9 14 4 9l5-5 1.4 1.4L7.8 8h6.3q2.425 0 4.163 1.575Q20 11.15 20 13.5q0 2.35-1.737 3.925Q16.525 19 14.1 19Z"],
        VisibilityOff: ["0 96 960 960", "m644 628-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660 556q0 20-4 37.5T644 628Zm128 126-58-56q38-29 67.5-63.5T832 556q-50-101-143.5-160.5T480 336q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920 556q-23 59-60.5 109.5T772 754Zm20 246L624 834q-35 11-70.5 16.5T480 856q-151 0-269-83.5T40 556q21-53 53-98.5t73-81.5L56 264l56-56 736 736-56 56ZM222 432q-29 26-53 57t-41 67q50 101 143.5 160.5T480 776q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300 556q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"],
        VisibilityOn: ["0 96 960 960", "M480 736q75 0 127.5-52.5T660 556q0-75-52.5-127.5T480 376q-75 0-127.5 52.5T300 556q0 75 52.5 127.5T480 736Zm0-72q-45 0-76.5-31.5T372 556q0-45 31.5-76.5T480 448q45 0 76.5 31.5T588 556q0 45-31.5 76.5T480 664Zm0 192q-146 0-266-81.5T40 556q54-137 174-218.5T480 256q146 0 266 81.5T920 556q-54 137-174 218.5T480 856Zm0-300Zm0 220q113 0 207.5-59.5T832 556q-50-101-144.5-160.5T480 336q-113 0-207.5 59.5T128 556q50 101 144.5 160.5T480 776Z"],
        Wifi0Bar: ["0 0 24 24", "M12 21 0 9q2.375-2.425 5.487-3.713Q8.6 4 12 4t6.512 1.287Q21.625 6.575 24 9Zm0-2.85 9.1-9.1q-1.975-1.5-4.3-2.275Q14.475 6 12 6q-2.475 0-4.8.775-2.325.775-4.3 2.275Z"],
        Wifi1Bar: ["0 0 24 24", "M12 21 0 9q2.4-2.45 5.5-3.725T12 4q3.425 0 6.525 1.275Q21.625 6.55 24 9Zm-2.975-5.825q.625-.45 1.388-.7.762-.25 1.587-.25t1.588.25q.762.25 1.387.7L21.1 9.05q-1.95-1.475-4.262-2.263Q14.525 6 12 6t-4.838.787Q4.85 7.575 2.9 9.05Z"],
        Wifi2Bar: ["0 0 24 24", "M12 21 0 9q2.4-2.45 5.5-3.725T12 4q3.425 0 6.525 1.275Q21.625 6.55 24 9Zm-4.525-7.375q.95-.7 2.1-1.088 1.15-.387 2.425-.387t2.425.387q1.15.388 2.1 1.088L21.1 9.05q-1.95-1.475-4.262-2.263Q14.525 6 12 6t-4.838.787Q4.85 7.575 2.9 9.05Z"],
        Wifi3Bar: ["0 0 24 24", "M12 21 0 9q2.4-2.45 5.5-3.725T12 4q3.425 0 6.525 1.275Q21.625 6.55 24 9Zm-6.2-9.05q1.325-.95 2.9-1.488 1.575-.537 3.3-.537 1.725 0 3.3.537 1.575.538 2.9 1.488l2.9-2.9q-1.95-1.475-4.262-2.263Q14.525 6 12 6t-4.838.787Q4.85 7.575 2.9 9.05Z"],
        Wifi4Bar: ["0 0 24 24", "M12 21 0 9q2.375-2.425 5.487-3.713Q8.6 4 12 4t6.512 1.287Q21.625 6.575 24 9Z"],
        WifiOff: ["0 0 24 24", "M17.925 15.075 16.5 13.65l4.6-4.6q-1.975-1.5-4.3-2.275Q14.475 6 12 6q-.725 0-1.45.075t-1.45.2l-1.65-1.65q1.125-.3 2.25-.463Q10.825 4 12 4q3.4 0 6.512 1.287Q21.625 6.575 24 9ZM12 18.15l1.675-1.65-8.75-8.75q-.525.275-1.025.612-.5.338-1 .688Zm8.475 5.15L15.1 17.9 12 21 0 9q.8-.8 1.663-1.475.862-.675 1.812-1.225l-2.8-2.8L2.1 2.075l19.8 19.8ZM12.8 9.95Zm-3.5 2.175Z"],
    };

    const svgSizes: Record<SizeType, string> = {
        xs: "w-3 h-3",
        sm: "w-3.5 h-3.5",
        md: "w-5 h-5",
        lg: "w-6 h-6",
        xl: "w-8 h-8",
    };

    export type IconType = keyof typeof icons;

    export function getWifiRssiIcon(rssi: number | false | null | undefined): IconType {
        if (!rssi) {
            return "WifiOff";
        } else if (rssi > -56) {
            return "Wifi4Bar";
        } else if (rssi > -67) {
            return "Wifi3Bar";
        } else if (rssi > -78) {
            return "Wifi2Bar";
        } else if (rssi > -89) {
            return "Wifi1Bar";
        } else {
            return "Wifi0Bar";
        }
    }
</script>

<script lang="ts">
    import classNames from "classnames";
import type {SizeType} from "./types";

    export let icon: IconType;
    export let size: SizeType | undefined = undefined;
    export let title: string = "";

    let viewBox: string, path: string;
    $: [viewBox, path] = icons[icon];
</script>

<svg
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    {...$$restProps}
    {viewBox}
    class={classNames("shrink-0", size && svgSizes[size], $$props.class)}
>
    {#if title}<title>{title}</title>{/if}
    <path d={path} />
</svg>
